<template>
	<view class="extension">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#0b0a34"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view class="" v-if="current === 0">
				<view class="none" v-if="yhqList&&yhqList.length ==0">
					<image src="../../../static/image/暂无优惠券@2x.png" mode="widthFix"></image>
					<text>暂无优惠券</text>
				</view>
				<view class="list" v-for="(item,index) in yhqList" :key="index">
					<image src="../../../static/image/满减券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">￥{{item.faceValue}}元通用券</text>
							<text class="time1">有效期{{item.endDate}} </text>
							<text class="name">{{item.merchantName}}</text>
							<text class="address">{{item.address}}</text>
						</view>
						<view class="right">
							<text class="orange" v-if="item.receive"
								@click="useFun(item.couponCode,item.merchantName)">去使用</text>
							<text class="orange" v-if="!item.receive" @click="lqBtn(item.id)">领取</text>
						</view>
					</view>
					<view class="shuoming">
						<uni-icons type="info" size="30"></uni-icons>
						注：限店内会员用户领取使用
					</view>
				</view>

			</view>
			<view class="" v-if="current === 1">
				<view class="none" v-if="unYhqList&&unYhqList.length ==0">
					<image src="../../../static/image/暂无优惠券@2x.png" mode=""></image>
					<text>暂无优惠券</text>
				</view>
				<view class="list" v-for="(item,index) in unYhqList" :key="index">
					<image src="../../../static/image/满减券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">￥{{item.amount}}元通用券</text>
							<text class="time1">有效期{{item.endDate}} </text>
							<text class="name">{{item.merchantName}}</text>
							<text class="address">{{item.address}}</text>
						</view>
						<view class="right">
							<text class="orange" @click="useFun(item.couponCode,item.merchantName)">去使用</text>
							<!-- <text class="orange" v-if="!item.receive" @click="useFun">领取</text> -->

						</view>
					</view>
					<view class="shuoming">
						<uni-icons type="info" size="30"></uni-icons>
						注：限店内会员用户领取使用
					</view>
				</view>
			</view>
			<view class="" v-if="current === 2">
				<view class="none" v-if="hasYhqList&&hasYhqList.length ==0">
					<image src="../../../static/image/暂无优惠券@2x.png" mode=""></image>
					<text>暂无优惠券</text>
				</view>

				<view class="list had" v-for="(item,index) in hasYhqList" :key="index">
					<image src="../../../static/image/已过期券bg@2x.png"></image>
					<view class="info">
						<view class="left">
							<text class="title">￥{{item.faceValue}}元通用券</text>
							<text class="time3">有效期{{item.endDate}} </text>
							<text class="name">{{item.merchantName}}</text>
							<text class="address">{{item.address}}</text>
						</view>
						<view class="right">
							<text class="grey">已过期</text>
						</view>
					</view>
					<!-- <view class="shuoming">
						<uni-icons type="info" size="30"></uni-icons>
						注：限店内会员用户领取使用
					</view> -->
				</view>

			</view>

		</view>
		<view class="shadow" v-if="isTrue">
			<view class="number">
				<text class="code">{{codeVal}}</text>
				<text class="intro">请至{{addressVal}}提供券码核销使用</text>
				<view class="close" @click="closeBtnFun">
					<uni-icons type="closeempty" color="#fff"></uni-icons>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	const {
		mourn,
		theme
	} = useStore()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const current = ref(0)
	const items = ref(['全部', '即将过期', '已过期'])
	const isTrue = ref(false)
	const yhqList = ref([]) //全部优惠券
	const hasYhqList = ref([]) //已使用
	const unYhqList = ref([]) //未使用
	const codeVal = ref(null)
	const addressVal = ref(null)
	onMounted(() => {
		getUsterTickerList()
	})
	onLoad(options => {
		// proxy.sjuLogin.saveValue("xndzOpenid", 'oNbHa6ELXn46a5Ykt0okTgzNV5DA');
		console.log(proxy.sjuLogin.getValue("xndzOpenid"))
		console.log(proxy.sjuConfig.appInfo.appId)
		console.log(proxy.sjuLogin.getValue('xndz_mobileShip'))

		if (!proxy.sjuBase.isNull(options.openid)) {
			proxy.sjuLogin.saveValue("xndzOpenid", options.openid);
		}
		if (proxy.sjuBase.isNull(proxy.sjuLogin.getValue('xndz_mobileShip'))) {
			proxy.sjuNav.navigateTo('/intake/login')
		}

	})
	const onClickItem = (e) => {
		if (current.value != e.currentIndex) {
			current.value = e.currentIndex;
		}
	}
	const useFun = (code, address) => {
		isTrue.value = true
		codeVal.value = code
		addressVal.value = address

	}
	const closeBtnFun = () => {
		isTrue.value = false
	}
	const getUsterTickerList = () => {
		yhqList.value = []
		unYhqList.value = []
		hasYhqList.value = []
		proxy.sjuRequest.request("/api/shanghu/getUserCouponList/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"mobile": proxy.sjuLogin.getValue('xndz_mobileShip'),
		}).then(
			res => {
				console.log(res)
				if (res.code == "0000") {
					// yhqList.value = res.data
					res.data.forEach(function(item) {
						if (!item.receive) {
							yhqList.value.push(item)
						}

					});
				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
				} else if (res.code == "0002") {

				}
			})

		proxy.sjuRequest.request("/api/shanghu/geReceivedCouponList/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"mobile": proxy.sjuLogin.getValue('xndz_mobileShip'),
		}).then(
			res => {
				console.log(res)
				if (res.code == "0000") {
					unYhqList.value = res.data
					res.data.forEach(function(item) {
						if (item.checkStatus == 2) {
							hasYhqList.value.push(item)
						}

					});
					

				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
				} else if (res.code == "0002") {

				}
			})

	}
	const lqBtn = (id) => {
		console.log(id)
		proxy.sjuRequest.request("/api/shanghu/received/" + proxy.sjuConfig.appInfo.appId, 'post', {
			"mobile": proxy.sjuLogin.getValue('xndz_mobileShip'),
			"productId": id,
		}).then(
			res => {
				console.log(res)
				if (res.code == '0000') {
					proxy.sjuAlert.showError("领取成功");
					getUsterTickerList()
				}

			})
	}
</script>

<style lang="scss">
	.extension {
		width: 100%;
		height: auto;
		padding: 10px;
		box-sizing: border-box;
		padding-bottom:20px;


		.list {
			margin-top: 20px;
			display: flex;
			width: 100%;
			height: 120px;
			position: relative;
			flex-direction: column;

			>image {
				width: 100%;
				height: 110px;
				position: absolute;
				top: 0;
				left: 0;
			}

			.shuoming {
				margin-top: 10px;
				color: #828094;
				font-size: 11px;
			}

			.info {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: row;
				padding: 10px;
				box-sizing: border-box;
				z-index: 9;

				.left {
					width: 74%;
					display: flex;
					flex-direction: column;
					color: #fff;
					line-height: 1.5;
					padding: 0px 15% 0px 10px;
					box-sizing: border-box;

					.title {
						font-size: 36rpx;

					}

					.time1 {
						font-size: 22rpx;
						color: #f4a847;
						background: rgba(255, 255, 255, 0.3);
						padding-left: 5px;
						box-sizing: border-box;
					}

					.time2 {
						font-size: 22rpx;
						color: #249ae6;
						background: rgba(255, 255, 255, 0.3);
						padding-left: 5px;
						box-sizing: border-box;
					}

					.time3 {
						font-size: 22rpx;
						color: #828094;
						background: #efeff0;
						padding-left: 5px;
						box-sizing: border-box;

					}

					// .name {
					// 	font-size: 26rpx;
					// }
					.name {
						font-size: 22rpx;
					}
				}

				.right {
					display: flex;
					flex-grow: 1;
					justify-content: center;
					align-items: center;

					text {
						padding: 10px 20px;
						border-radius: 20px;
						color: #fff;
						border: 1px solid #fff;
						margin-bottom: 5px;

					}

					.orange {
						background: #f4a847;
					}

					.blue {
						background: #4bace8;
					}

					.grey {
						background: #dfdfe1;
						border: 1px solid #b6b6b6;
						color: #b6b6b6;
					}
				}
			}

		}

		.had {
			color: #fff;

			>image {
				width: 100%;
				height: 100px;

			}
		}

		.content {
			.none {
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 60%
				}
			}
		}

		.shadow {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 10;

			.number {
				width: 80%;
				height: 150px;
				padding: 20px;
				background: #fff;
				box-sizing: border-box;
				border-radius: 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				.code {
					font-size: 30px;
					line-height: 3;

				}

				.intro {
					font-size: 14px;
				}

				.close {
					position: absolute;
					left: 50%;
					bottom: -50px;
					transform: translateX(-50%);
					z-index: 11;

					::v-deep .uniui-closeempty:before {
						font-size: 40px !important;
					}
				}

			}
		}
	}
</style>